<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="demo/css/normalize.css">
    <link rel="stylesheet" href="demo/js/plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" href="demo/css/style.css">
</head>
<body>
<div class="c-layout-bottom" id="c-layout-bottom">
    <div class="c-bottom">
        <div class="c-bottom-body">
            <div class="c-bottom-content" id="c-bottom-content">
                <div style="width: 2100px;overflow: hidden;">
                    <div class="c-bottom-content-panel" style="width: 300px">
                        <div class="c-form-item" style="margin-bottom: 8px;">
                            <div class="c-fom-item-select-with-title">
                                <label>选择项目：</label>
                                <select class="c-fom-item-select">
                                    <option value="1">选项一</option>
                                    <option value="2">选项二</option>
                                </select>
                            </div>
                        </div>

                        <div class="c-row">
                            <div class="c-col">
                                <div class="c-form-item">
                                    <label class="c-form-item-checkbox">
                                        <input type="checkbox"/> <span>切换飞行</span>
                                    </label>
                                    <br>
                                    <label class="c-form-item-checkbox">
                                        <input type="checkbox"/> <span>现状模型</span>
                                    </label>
                                    <br>
                                    <label class="c-form-item-checkbox">
                                        <input type="checkbox"/> <span>规划模型</span>
                                    </label>
                                    <br>
                                    <label class="c-form-item-checkbox">
                                        <input type="checkbox"/> <span>辅助数据</span>
                                    </label>
                                    <br>
                                    <label class="c-form-item-checkbox">
                                        <input type="checkbox"/> <span>起伏显示</span>
                                    </label>
                                </div>

                                <div class="c-button">
                                    <div class="c-button-text">项目编辑</div>
                                </div>
                            </div>

                            <div class="c-col" style="margin-left: 8px;">
                                <div class="c-bottom-mini-panel do-nicescrol">
                                    <table>
                                        <tbody>
                                        <tr>
                                            <td style="text-align: center;">
                                                <div class="c-form-item"><label class="c-form-item-radio"><input
                                                        type="radio" name="1"/><span></span></label></div>
                                            </td>
                                            <td>用地红线</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: center;">
                                                <div class="c-form-item"><label class="c-form-item-radio"><input
                                                        type="radio" name="1"/><span></span></label></div>
                                            </td>
                                            <td>地形归零面</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: center;">
                                                <div class="c-form-item"><label class="c-form-item-radio"><input
                                                        type="radio" name="1"/><span></span></label></div>
                                            </td>
                                            <td>地形归零面</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: center;">
                                                <div class="c-form-item"><label class="c-form-item-radio"><input
                                                        type="radio" name="1"/><span></span></label></div>
                                            </td>
                                            <td>地形归零面</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: center;">
                                                <div class="c-form-item"><label class="c-form-item-radio"><input
                                                        type="radio" name="1"/><span></span></label></div>
                                            </td>
                                            <td>地形归零面</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: center;">
                                                <div class="c-form-item"><label class="c-form-item-radio"><input
                                                        type="radio" name="1"/><span></span></label></div>
                                            </td>
                                            <td>地形归零面</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="c-col" style="margin-left: 8px;">
                                <div class="c-bottom-mini-panel do-nicescrol">
                                    <table>
                                        <tbody>
                                        <tr>
                                            <td style="text-align: center;">
                                                <div class="c-form-item"><label class="c-form-item-radio"><input
                                                        type="radio" name="1"/><span></span></label></div>
                                            </td>
                                            <td>用地红线</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: center;">
                                                <div class="c-form-item"><label class="c-form-item-radio"><input
                                                        type="radio" name="1"/><span></span></label></div>
                                            </td>
                                            <td>地形归零面</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: center;">
                                                <div class="c-form-item"><label class="c-form-item-radio"><input
                                                        type="radio" name="1"/><span></span></label></div>
                                            </td>
                                            <td>地形归零面</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: center;">
                                                <div class="c-form-item"><label class="c-form-item-radio"><input
                                                        type="radio" name="1"/><span></span></label></div>
                                            </td>
                                            <td>地形归零面</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: center;">
                                                <div class="c-form-item"><label class="c-form-item-radio"><input
                                                        type="radio" name="1"/><span></span></label></div>
                                            </td>
                                            <td>地形归零面</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: center;">
                                                <div class="c-form-item"><label class="c-form-item-radio"><input
                                                        type="radio" name="1"/><span></span></label></div>
                                            </td>
                                            <td>地形归零面</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="c-col" style="margin-left: 8px;">
                                <div class="c-bottom-mini-panel do-nicescrol">
                                    <table>
                                        <tbody>
                                        <tr>
                                            <td style="text-align: center;">
                                                <div class="c-form-item"><label class="c-form-item-radio"><input
                                                        type="radio" name="1"/><span></span></label></div>
                                            </td>
                                            <td>用地红线</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: center;">
                                                <div class="c-form-item"><label class="c-form-item-radio"><input
                                                        type="radio" name="1"/><span></span></label></div>
                                            </td>
                                            <td>地形归零面</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: center;">
                                                <div class="c-form-item"><label class="c-form-item-radio"><input
                                                        type="radio" name="1"/><span></span></label></div>
                                            </td>
                                            <td>地形归零面</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: center;">
                                                <div class="c-form-item"><label class="c-form-item-radio"><input
                                                        type="radio" name="1"/><span></span></label></div>
                                            </td>
                                            <td>地形归零面</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: center;">
                                                <div class="c-form-item"><label class="c-form-item-radio"><input
                                                        type="radio" name="1"/><span></span></label></div>
                                            </td>
                                            <td>地形归零面</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: center;">
                                                <div class="c-form-item"><label class="c-form-item-radio"><input
                                                        type="radio" name="1"/><span></span></label></div>
                                            </td>
                                            <td>地形归零面</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="c-bottom-content-panel" style="width: 240px">
                        <div class="c-bottom-content-panel-title">
                            场景定位：
                        </div>
                        <div class="c-row">
                            <div class="c-col c-btns">
                                <div class="c-button">
                                    <div class="c-button-text">按钮名称</div>
                                </div>
                                <div class="c-button">
                                    <div class="c-button-text">按钮名称</div>
                                </div>
                                <div class="c-button">
                                    <div class="c-button-text">按钮名称</div>
                                </div>
                                <div class="c-button">
                                    <div class="c-button-text">按钮名称</div>
                                </div>
                            </div>
                            <div class="c-col">
                                <div class="c-bottom-mini-panel do-nicescrol" style="width: 140px;margin-top: 8px;">
                                    <ul class="c-list">
                                        <li>item</li>
                                        <li>item</li>
                                        <li>item</li>
                                        <li>item</li>
                                        <li>item</li>
                                        <li>item</li>
                                        <li>item</li>
                                        <li>item</li>
                                        <li>item</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="c-bottom-content-panel" style="width: 240px">
                        <div class="c-bottom-content-panel-title">
                            动画导航：
                        </div>
                        <div class="c-row">
                            <div class="c-col c-btns">
                                <div class="c-button">
                                    <div class="c-button-text">按钮名称</div>
                                </div>
                                <div class="c-button">
                                    <div class="c-button-text">按钮名称</div>
                                </div>
                                <div class="c-button">
                                    <div class="c-button-text">按钮名称</div>
                                </div>
                                <div class="c-button">
                                    <div class="c-button-text">按钮名称</div>
                                </div>
                            </div>
                            <div class="c-col">
                                <div class="c-bottom-mini-panel do-nicescrol" style="width: 140px;margin-top: 8px;">
                                    <ul class="c-list">
                                        <li>item</li>
                                        <li>item</li>
                                        <li>item</li>
                                        <li>item</li>
                                        <li>item</li>
                                        <li>item</li>
                                        <li>item</li>
                                        <li>item</li>
                                        <li>item</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="c-bottom-content-panel" style="width: 190px">
                        <div class="c-bottom-content-panel-title">
                            多方案比选：
                        </div>
                        <div class="c-row">
                            <div class="c-col">
                                <div class="c-bottom-mini-panel do-nicescrol"
                                     style="width: 100px;margin-top: 8px;margin-left: 8px;">
                                    <div class="c-form-item">
                                        <label class="c-form-item-radio">
                                            <input type="radio" name="2"/> <span>左右双屏</span>
                                        </label>
                                    </div>
                                    <div class="c-form-item">
                                        <label class="c-form-item-radio">
                                            <input type="radio" name="2"/> <span>上下双屏</span>
                                        </label>
                                    </div>
                                    <div class="c-form-item">
                                        <label class="c-form-item-radio">
                                            <input type="radio" name="2"/> <span>左中右三屏</span>
                                        </label>
                                    </div>
                                    <div class="c-form-item">
                                        <label class="c-form-item-radio">
                                            <input type="radio" name="2"/> <span>上中下三屏</span>
                                        </label>
                                    </div>
                                    <div class="c-form-item">
                                        <label class="c-form-item-radio">
                                            <input type="radio" name="2"/> <span>四分屏</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="c-col c-btns" style="width: 54px;">
                                <div class="c-button">
                                    <div class="c-button-text">开始</div>
                                </div>
                                <div class="c-button">
                                    <div class="c-button-text">退出</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="c-bottom-content-panel" style="width: 100px">
                        <div class="c-bottom-content-panel-title">
                            其他面板：
                        </div>
                    </div>
                    <div class="c-bottom-content-panel" style="width: 100px">
                        <div class="c-bottom-content-panel-title">
                            <button id="ButtonClose"
                                    style="position:absolute;right:10px;top:10px;color:whitesmoke;background:transparent;border:none;font-size:1.2em">
                                ×
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>